<template>
  <div>
    <div>
      <van-sticky>
        <van-nav-bar title="送礼物" left-arrow @click-left="onClickLeft" />
      </van-sticky>
    </div>
    <div
      class="commentHeader"
      v-for="(item, index) in commentData"
      :key="index"
    >
      <img :src="item.img" alt="" />
      <h2>{{ item.name }}医生</h2>
    </div>
    <div class="giftText">
      <p>{{ currentText }}</p>
      <van-button
        plain
        round
        icon="https://kano.guahao.com/oLr834034670"
        type="primary"
        size="small"
        @click="changeText"
      >
        更换赠言
      </van-button>
    </div>
    <div class="giftBox">
      <img src="https://kano.guahao.cn/ZsV118820168?webp=80" alt="" />
    </div>
    <van-button
      round
      type="primary"
      size="large"
      color="#ff695c"
      @click="showgiftGiving"
    >
      免费赠送
    </van-button>
    <van-popup v-model:show="showCenter" round :style="{ padding: '64px' }"
      >赠送成功</van-popup
    >
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import instance from "../axios/index";
import { useCounterStore } from "../pinia/index";
import { showToast } from "vant";
const commentData = ref([]);
const showCenter = ref(false);
const flag = ref(true);
interface UserInfo {
  name: string;
  img: string;
  id: string;
}
const texts = ref([
  "感谢您的帮助，祝您身体健康，工作顺利！",
  "感谢您的细心回复，您是患者的健康守护天使~",
  "医术高超，医德高尚，感谢有您，祝您快乐!",
  "感谢您用爱心耐心细心，换来患者的安心贴心！",
  "医生是最可爱的人，大爱无声，向您致敬！",
  "与患者共情精悬壶，柳叶刀下济仁心。感恩有您！",
]);
const currentText = ref(texts.value[0]);
const changeText = () => {
  // 生成一个随机索引，范围是数组的长度减1
  const randomIndex = Math.floor(Math.random() * texts.value.length);
  // 更新当前展示的文本为随机选择的文本
  currentText.value = texts.value[randomIndex];
};
const store = useCounterStore();
const list = ref<UserInfo>(store.data);
instance.post("/api/homeall").then((res) => {
  res.data.data.forEach((item: any) => {
    if (item.id === list.value.id) {
      commentData.value.push(item);
    }
  });
});

const showgiftGiving = () => {
  if (flag.value === true) {
    showCenter.value = true;
    flag.value = false;
  } else {
    showToast("您已经送过礼物了");
  }
};
const onClickLeft = () => history.back();
</script>

<style scoped lang="scss">
.commentHeader {
  width: 100%;
  text-align: center;
}
.commentHeader img {
  width: 1rem;
  width: 1rem;
  border-radius: 50%;
}
.commentHeader h2 {
  margin-top: 0.2rem;
  margin-bottom: 0.2rem;
}
.giftText {
  text-align: center;
}
.giftText p {
  margin-bottom: 0.2rem;
}
.giftBox {
  width: 100%;
  height: 1.5rem;
  text-align: center;
  margin-top: 0.2rem;
}
.giftBox img {
  width: 1.5rem;
  height: 1.5rem;
}
</style>